<template>
  <div class="course-container">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card>
          <template #header>
            <span>选课管理</span>
          </template>
          
          <el-tabs v-model="activeTab" class="course-tabs">
            <el-tab-pane label="可选课程" name="available">
              <el-table :data="availableCourses" style="width: 100%">
                <el-table-column prop="code" label="课程代码" width="120" />
                <el-table-column prop="name" label="课程名称" />
                <el-table-column prop="credit" label="学分" width="80" />
                <el-table-column prop="teacher" label="授课教师" width="120" />
                <el-table-column prop="time" label="上课时间" width="150" />
                <el-table-column prop="capacity" label="容量" width="80" />
                <el-table-column prop="selected" label="已选" width="80" />
                <el-table-column label="操作" width="120">
                  <template #default="scope">
                    <el-button 
                      type="primary" 
                      size="small" 
                      @click="selectCourse(scope.row)"
                      :disabled="scope.row.selected >= scope.row.capacity"
                    >
                      选课
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            
            <el-tab-pane label="已选课程" name="selected">
              <el-table :data="selectedCourses" style="width: 100%">
                <el-table-column prop="code" label="课程代码" width="120" />
                <el-table-column prop="name" label="课程名称" />
                <el-table-column prop="credit" label="学分" width="80" />
                <el-table-column prop="teacher" label="授课教师" width="120" />
                <el-table-column prop="time" label="上课时间" width="150" />
                <el-table-column label="操作" width="120">
                  <template #default="scope">
                    <el-button 
                      type="danger" 
                      size="small" 
                      @click="dropCourse(scope.row)"
                    >
                      退课
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card>
          <template #header>
            <span>选课统计</span>
          </template>
          
          <div class="course-stats">
            <div class="stat-item">
              <span class="label">已选学分：</span>
              <span class="value">{{ totalCredits }}</span>
            </div>
            <div class="stat-item">
              <span class="label">已选课程：</span>
              <span class="value">{{ selectedCourses.length }}门</span>
            </div>
            <div class="stat-item">
              <span class="label">可选课程：</span>
              <span class="value">{{ availableCourses.length }}门</span>
            </div>
          </div>
          
          <el-divider />
          
          <div class="course-schedule">
            <h4>课程表</h4>
            <el-table :data="scheduleData" size="small">
              <el-table-column prop="time" label="时间" width="80" />
              <el-table-column prop="mon" label="周一" />
              <el-table-column prop="tue" label="周二" />
              <el-table-column prop="wed" label="周三" />
              <el-table-column prop="thu" label="周四" />
              <el-table-column prop="fri" label="周五" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('available')

const availableCourses = ref([
  {
    code: 'CS101',
    name: '计算机导论',
    credit: 3,
    teacher: '张教授',
    time: '周一 1-2节',
    capacity: 50,
    selected: 35
  },
  {
    code: 'CS102',
    name: '数据结构',
    credit: 4,
    teacher: '李教授',
    time: '周二 3-4节',
    capacity: 40,
    selected: 25
  },
  {
    code: 'CS103',
    name: '算法设计',
    credit: 3,
    teacher: '王教授',
    time: '周三 1-2节',
    capacity: 45,
    selected: 30
  }
])

const selectedCourses = ref([
  {
    code: 'MATH101',
    name: '高等数学',
    credit: 4,
    teacher: '赵教授',
    time: '周一 3-4节'
  },
  {
    code: 'ENG101',
    name: '大学英语',
    credit: 2,
    teacher: '刘教授',
    time: '周二 1-2节'
  }
])

const totalCredits = computed(() => {
  return selectedCourses.value.reduce((sum, course) => sum + course.credit, 0)
})

const scheduleData = ref([
  { time: '1-2', mon: '高等数学', tue: '大学英语', wed: '', thu: '', fri: '' },
  { time: '3-4', mon: '', tue: '', wed: '数据结构', thu: '', fri: '' },
  { time: '5-6', mon: '', tue: '', wed: '', thu: '', fri: '' }
])

const selectCourse = (course: any) => {
  if (course.selected >= course.capacity) {
    ElMessage.warning('课程已满，无法选择')
    return
  }
  
  selectedCourses.value.push({
    code: course.code,
    name: course.name,
    credit: course.credit,
    teacher: course.teacher,
    time: course.time
  })
  
  course.selected++
  ElMessage.success(`成功选择课程：${course.name}`)
}

const dropCourse = (course: any) => {
  const index = selectedCourses.value.findIndex(c => c.code === course.code)
  if (index > -1) {
    selectedCourses.value.splice(index, 1)
    
    // 更新可选课程中的已选人数
    const availableCourse = availableCourses.value.find(c => c.code === course.code)
    if (availableCourse) {
      availableCourse.selected--
    }
    
    ElMessage.success(`成功退选课程：${course.name}`)
  }
}
</script>

<style scoped>
.course-container {
  padding: 0;
}

.course-tabs {
  margin-top: 20px;
}

.course-stats {
  padding: 10px 0;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.label {
  color: #606266;
  font-weight: 500;
}

.value {
  color: #303133;
  font-weight: bold;
}

.course-schedule h4 {
  margin: 0 0 10px 0;
  color: #303133;
}
</style>
